<template>
  <Modal
    width="600"
    v-model="config"
    title="添加银行卡"
    footer-hide
    :mask-closable="false"
    @on-cancel="cancel"
  >
    <div class="pay-modal-main" style="positon: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c mg-b-15">
        <span class="model-title">真实姓名</span>
        <span class="c-d2" v-if="$store.state.user.username">{{
          $store.state.user.username
        }}</span>
        <span class="c-d2" v-else
          >您还未进行实名认证，请<router-link
            to="/user/certification"
            class="b-form-font-button"
            >前往认证</router-link
          ></span
        >
      </div>
      <div class="flx-row-s-c mg-b-15">
        <span class="model-title">银行卡账号</span>
        <input
          class="bankNumber"
          type="text"
          v-model="cardNumber"
          style="width: 300px"
          @input="bankNumberInput"
          maxlength="19"
          placeholder="请输入银行卡账号"
        />
      </div>
      <div class="flx-row-s-c mg-b-15">
        <span class="model-title">确认账号</span>
        <input
          class="bankNumber"
          type="text"
          v-model="confirmCardNumber"
          style="width: 300px"
          @input="bankNumberConfirmInput"
          maxlength="19"
          placeholder="请输入再次输入银行卡账号"
        />
      </div>
      <div class="flx-row-s-c mg-b-15">
        <span class="model-title">银行名称</span>
        <span class="c-d2" v-if="!bankName">请先输入银行卡账号</span>
        <span class="c-d2" v-else>{{ bankName }}</span>
      </div>
      <div class="flx-row-s-c mg-b-15">
        <span class="model-title">开户地区</span>
        <Select
          v-model="province"
          style="width: 120px; margin-right: 10px"
          @on-change="changeProvince"
        >
          <Option
            v-for="(item, index) in addressList"
            :value="item.value"
            :key="'p' + index"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-if="province != null && province != ''"
          v-model="city"
          style="width: 120px; margin-right: 10px"
          @on-change="changeCity"
        >
          <Option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-if="
            province != null && province != '' && city != null && city != ''
          "
          v-model="areas"
          style="width: 120px"
        >
          <Option
            v-for="item in areaList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="flx-row-s-c" style="margin-bottom: 30px">
        <span class="model-title">开户支行</span>
        <Input
          v-model.trim="branch"
          placeholder="请输入开户支行"
          maxlength="100"
          style="width: 300px"
        />
      </div>
      <div class="flx-row-c-c">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="confirm"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { addressList } from "@/utils/publicData";
import { getBankName, addBankCard } from "@/api/user";
import { debounce } from "@/utils/format";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.cardNumber = "";
          this.confirmCardNumber = "";
          this.bankName = "";
          this.province = "";
          this.cityList = [];
          this.city = "";
          this.areaList = [];
          this.areas = "";
          this.branch = "";
        }
      },
    },
  },
  data() {
    return {
      loading: false,

      addressList: [],
      // 表单数据
      cardNumber: "",
      confirmCardNumber: "",
      bankName: "",
      province: "",
      cityList: [],
      city: "",
      areaList: [],
      areas: "",
      branch: "",
    };
  },
  created() {
    this.getAddressList();
  },
  methods: {
    // 获取省市区
    async getAddressList() {
      let res = await addressList();
      this.addressList = res;
    },
    cancel() {
      this.config = false;
    },
    changeProvince() {
      for (let i in this.addressList) {
        if (this.addressList[i].value == this.province) {
          this.cityList = this.addressList[i].children;
        }
      }
      this.city = "";
      this.areas = "";
    },
    changeCity() {
      for (let i in this.cityList) {
        if (this.cityList[i].value == this.city) {
          this.areaList = this.cityList[i].children;
        }
      }
      this.areas = "";
    },
    bankNumberInput() {
      this.cardNumber = this.cardNumber.replace(/[^\d.]/g, "");
      this.getBankName();
    },
    // 函数防抖获取英航卡名称
    getBankName: debounce(async function () {
      if (this.cardNumber.length < 16) return;
      let res = await getBankName(this.cardNumber);
      if (res.code == 200) {
        this.bankName = res.data;
      } else if (res.code == 500 && res.data == "银行名称获取失败") {
        this.bankName = "银行卡不存在";
      }
    }, 1000),
    bankNumberConfirmInput() {
      this.confirmCardNumber = this.confirmCardNumber.replace(/[^\d.]/g, "");
    },
    // 提交表单
    async confirm() {
      if (!this.$store.state.user.username) {
        this.$Message.warning("请先进行实名认证！");
        return;
      }
      if (!this.cardNumber) {
        this.$Message.warning("请输入银行卡账号！");
        return;
      }
      if (!this.confirmCardNumber) {
        this.$Message.warning("请输入再次输入银行卡账号！");
        return;
      }
      if (this.cardNumber != this.confirmCardNumber) {
        this.$Message.warning("两次银行卡账号输入不一致！");
        return;
      }
      if (this.bankName == "" || this.bankName == "银行卡不存在") {
        this.$Message.warning("银行卡不存在！");
        return;
      }
      if (!this.province || !this.city || !this.areas) {
        this.$Message.warning("请选择开户地区！");
        return;
      }
      if (!this.branch) {
        this.$Message.warning("请输入开户支行！");
        return;
      }
      let data = {
        cardNumber: this.cardNumber,
        confirmCardNumber: this.confirmCardNumber,
        bankName: this.bankName,
        province: this.province,
        city: this.city,
        areas: this.areas,
        branch: this.branch,
      };
      this.loading = true;
      let res = await addBankCard(data);
      if (res.code == 200) {
        this.$Message.success("添加成功");
        this.$emit("add-success");
        this.config = false;
      }
      this.loading = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-modal-main {
  padding: 30px 40px 50px;
}
.model-title {
  text-align: right;
  width: 100px;
  margin-right: 30px;
  font-size: 14px;
  line-height: 32px;
  color: #000;
  flex-shrink: 0;
  &::after {
    content: ":";
  }
}
.mg-b-15 {
  margin-bottom: 15px;
}
.bankNumber {
  border: 1px solid #dcdee2;
  border-radius: 4px;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 14px;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  background-color: #fff;
  color: #20213c;
}
.bankNumber::placeholder {
  color: #c5c8ce;
}
.bankNumber:focus,
.bankNumber:hover {
  border-color: #fc461e !important;
  box-shadow: none !important;
}
</style>